<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>出错了</title>
    <link rel="icon" th:href="@{/error.png}" type="image/png"/>
    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" th:href="@{/css/Error.css}">
</head>
<body>
<div id="app">
    <!-- 头部：返回按钮 -->
    <header class="header">
        <button class="home-btn" @click="goHome">
            返回主页面
        </button>
    </header>

    <!-- 主体内容 -->
    <main class="container">
        <div class="error-card">
            <div class="error-icon">
                <img src="/error.png" alt="Error Icon" class="error-icon-img">
            </div>
            <h1>服务器路径错误 404</h1>

            <p class="error-message">
                您访问的服务器节点不存在或已离线<br>
                请检查URL地址或返回主页面
            </p>

            <!-- 服务器终端模拟 -->
            <div class="server-terminal">
                <div class="terminal-line">> ping {{ requestedPath }} -t</div>
                <div class="terminal-line error">ERROR: Destination unreachable</div>
                <div class="terminal-line">> trace route {{ requestedPath }}</div>
                <div class="terminal-line error">* * * Request timed out</div>
                <div class="terminal-line">> status: SERVER_PATH_NOT_FOUND</div>
                <div class="terminal-line">> suggestion: Check routing table or return to main console</div>
            </div>

            <!-- 音频播放控制 -->
            <div class="audio-controls" v-if="showAudioFeature">
                <button class="audio-btn" @click="playRandomAudio" :disabled="audioLoading">
                    {{ audioLoading ? '加载音效中...' : '播放私人音效' }}
                </button>
            </div>
        </div>
    </main>

    <!-- 页脚版权 -->
    <footer class="footer">
        Copyright &copy; 2025 Wooming Games. 版权所有
    </footer>
</div>

<script>
    const { createApp, ref, onMounted } = Vue;

    createApp({
        setup() {
            // 获取当前请求路径（用于终端模拟显示）
            const requestedPath = ref(window.location.pathname);

            // 音频功能状态
            const audioLoading = ref(false);
            const showAudioFeature = ref(false); // 可设置为false来隐藏功能
            const audioPlayer = new Audio();

            // 返回主页
            const goHome = () => {
                // 实际项目中替换为你的路由方法
                window.location.href = '/';
            };

            // 播放随机音频
            const playRandomAudio = async () => {
                try {
                    audioLoading.value = true;

                    // 模拟API请求 - 实际项目中替换为真实API
                    // const response = await axios.get('/api/random-audio');
                    // const audioUrl = response.data.url;

                    // 模拟延迟
                    await new Promise(resolve => setTimeout(resolve, 800));

                    // 使用模拟音频（实际项目中替换为从API获取的URL）
                    const sampleAudios = [
                        'https://example.com/audio/server_hum_1.mp3',
                        'https://example.com/audio/terminal_beep.mp3',
                        'https://example.com/audio/network_connect.mp3'
                    ];
                    audioPlayer.src = sampleAudios[Math.floor(Math.random() * sampleAudios.length)];
                    audioPlayer.play().catch(e => {
                        console.error('音频播放失败:', e);
                        alert('音频加载失败，请检查网络连接');
                    });
                } catch (error) {
                    console.error('获取音频失败:', error);
                    alert('无法获取音频资源');
                } finally {
                    audioLoading.value = false;
                }
            };

            // 组件挂载时初始化
            onMounted(() => {
                // 可以在此添加更多初始化逻辑
            });

            return {
                requestedPath,
                audioLoading,
                showAudioFeature,
                goHome,
                playRandomAudio
            };
        }
    }).mount('#app');
</script>
</body>
</html>